<template>
  <div class="home card">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="字典名称">
          <el-input clearable v-model="formInline.dictName" placeholder="" style="width: 180px" />
        </el-form-item>
        <el-form-item label="	字典类型">
          <el-input clearable v-model="formInline.dictType" placeholder="" style="width: 180px" />
        </el-form-item>
        <el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.status" placeholder="" style="width: 180px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchbutton">搜索</el-button>
            <el-button type="primary" @click="addbutton">新增</el-button>
            <el-button type="primary" @click="xgbutton">修改</el-button>
            <el-button type="primary" @click="deletebutton">删除</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentbox">
      <div class="table-box">
        <el-table :data="datalist.rows" border max-height="500" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="dictName" label="字典名称" />
          <el-table-column prop="dictType" label="字典类型" />

          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <span v-if="scope.row.status == 0" type="primary">正常</span>
              <span v-else type="warning">停用</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
          <el-table-column prop="status" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="seeClick(scope.row.dictType)">查看数据</el-button>
              <el-button link type="primary" size="small" @click="addClick(scope.row)">新增字典</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="fybox">
          <el-pagination
            v-model:current-page="formInline.pageNum"
            v-model:page-size="formInline.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager"
            :total="pagetotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="字典类型详情" width="600" :before-close="handleClose">
      <el-form :model="ruleForm" label-width="auto" ref="ruleFormRef" :rules="rules">
        <!-- <el-form-item label="字典id" prop="dictName"> <el-input v-model="ruleForm.dictId" /> </el-form-item> -->
        <el-form-item label="字典名称" prop="dictName"> <el-input v-model="ruleForm.dictName" /> </el-form-item>
        <el-form-item label="字典类型" prop="dictType"> <el-input v-model="ruleForm.dictType" /> </el-form-item>
        <el-form-item label="字典状态" prop="status">
          <el-select v-model="ruleForm.status" placeholder="" style="width: 180px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer savebox">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="savebutton(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogVisibletwo" title="字典详情" width="600" :before-close="handleClosetwo">
      <el-table :data="ruleFormtwo" style="width: 100%">
        <el-table-column prop="dictValue" label="字典id" width="180" />
        <el-table-column prop="dictLabel" label="字典名称" width="180" />
        <el-table-column prop="status" label="字典状态">
          <template #default="scope">
            <span v-if="scope.row.status == 0">正常</span>
            <span v-else>停用</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="操作">
          <template #default="scope">
            <!-- <el-button link type="primary" size="small" @click="seeClick(scope.row.dictType)">修改</el-button> -->
            <el-button link type="primary" size="small" @click="shanchuzid(scope.row.dictCode)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog v-model="dialogVisiblethree" title="新增字典" width="600" :before-close="handleClosethree">
      <el-form :model="ruleFormthree" label-width="auto" :rules="rulestwo" ref="ruleFormRefthree">
        <el-form-item label="字典排序" prop="dictSort">
          <el-input type="number" v-model="ruleFormthree.dictSort" />
        </el-form-item>
        <el-form-item label="字典标签" prop="dictLabel"> <el-input v-model="ruleFormthree.dictLabel" /> </el-form-item>
        <el-form-item label="字典键值" prop="dictValue"><el-input v-model="ruleFormthree.dictValue" /></el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="ruleFormthree.status" placeholder="" style="width: 180px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer savebox">
          <el-button @click="handleClosethree(ruleFormRefthree)">取消</el-button>
          <el-button type="primary" @click="savebuttonthree(ruleFormRefthree)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="home">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  zilxApi,
  addzdApi,
  updateApi,
  upsaveApi,
  deleteApi,
  refreshCache,
  seekdataApi,
  datadApi,
  deldezi
} from "@/api/system/system.js";
const router = useRouter();
let dialogVisible = ref(false);
let dialogVisibletwo = ref(false);
let dialogVisiblethree = ref(false);
let datalist = reactive({ rows: [] });
let ruleFormthree = ref({
  dictSort: "",
  dictLabel: "",
  dictValue: "",
  dictType: "",
  listClass: "default",
  status: "0"
});
const yblxlist = [
  {
    id: "Option1",
    name: "Option1"
  },
  {
    id: "Option2",
    name: "Option2"
  }
];
const ruleFormRef = ref();
const ruleFormRefthree = ref();
const rules = reactive({
  dictName: [{ required: true, message: "字典名称", trigger: "blur" }],
  dictType: [{ required: true, message: "字典类型", trigger: "blur" }],
  status: [{ required: true, message: "字典状态", trigger: "change" }],
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
});
const rulestwo = reactive({
  dictSort: [{ required: true, message: "字典排序", trigger: "blur" }],
  dictLabel: [{ required: true, message: "字典标签", trigger: "blur" }],
  dictValue: [{ required: true, message: "字典键值", trigger: "blur" }],
  status: [{ required: true, message: "状态", trigger: "change" }]
});
let ruleForm = ref({
  dictName: "",
  dictType: "",
  status: "0",
  remark: ""
});
let ruleFormtwo = ref({});
const options = [
  {
    value: "0",
    label: "正常"
  },
  {
    value: "1",
    label: "停用"
  }
];
var pagetotal = ref(0);
let handleSizeChange = () => {
  getlist();
};
let handleCurrentChange = () => {
  getlist();
};
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};
const searchbutton = () => {
  getlist();
};
const handleClose = done => {
  dialogVisible.value = false;
};
const handleClosetwo = () => {
  dialogVisibletwo.value = false;
};
const handleClosethree = () => {
  dialogVisiblethree.value = false;
};
const shanchuzid = id => {
  ElMessageBox.confirm("是否删除该字典?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      deldezi({
        e: id
      })
        .then(res => {
          ElMessage({
            message: "删除成功",
            type: "success"
          });
          handleClosetwo();
        })
        .catch(() => {});
    })
    .catch(() => {});
};
const savebuttonthree = () => {
  console.log(ruleFormthree.value);
  datadApi({
    dictSort: ruleFormthree.value.dictSort,
    dictLabel: ruleFormthree.value.dictLabel,
    dictValue: ruleFormthree.value.dictValue,
    dictType: ruleFormthree.value.dictType,
    listClass: "default",
    status: ruleFormthree.value.status
  })
    .then(res => {
      ElMessage({
        message: "新增成功",
        type: "success"
      });
      dialogVisiblethree.value = false;
      //刷新缓存
    })
    .then(() => {});
};
const addbutton = () => {
  ruleForm.value = {
    dictName: "",
    dictType: "",
    status: "0",
    remark: ""
  };

  dialogVisible.value = true;
};
let selection = ref([]);
const xgbutton = () => {
  if (selection.value.length == 1) {
    updateClick(selection.value[0].dictId);
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
const deletebutton = () => {
  if (selection.value.length == 1) {
    deleteClick(selection.value[0].dictId);
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
const handleSelectionChange = e => {
  selection.value = e;
};
function savebutton(formEl) {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      //修改
      if (xgstatus.value == true) {
        upsaveApi(ruleForm.value).then(() => {
          ElMessage({
            message: "修改成功",
            type: "success"
          });
          formEl.resetFields();
          dialogVisible.value = false;
          xgstatus.value = false;
          //刷新缓存
          refresh();
          //刷新列表数据
          getlist();
        });
      } else {
        //新增
        addzdApi(ruleForm.value).then(() => {
          ElMessage({
            message: "新增成功",
            type: "success"
          });
          formEl.resetFields();
          dialogVisible.value = false;
          getlist();
        });
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}
//获取字典列表
let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  dictName: "", //	字典名称
  status: "", //字典类型
  status: "0", //字典状态
  beginTime: "",
  endTime: ""
});
getlist();
// 获取字典列表
async function getlist() {
  try {
    // 解构参数，避免多次访问 formInline.value
    const { pageNum, pageSize, dictName, status, beginTime, endTime, dictType } = formInline.value;
    // 调用 API 获取数据
    const { rows, total } = await zilxApi({
      pageNum,
      pageSize,
      dictName,
      status,
      dictType,
      beginTime,
      endTime
    });
    // 更新响应式数据
    datalist.rows = rows;
    pagetotal.value = total;
  } catch (error) {
    ElMessage.error(error);
  }
}
let xgstatus = ref(false);
const updateClick = e => {
  updateApi({
    dictId: e
  }).then(res => {
    dialogVisible.value = true;
    ruleForm.value = res.data;
    xgstatus.value = true;
  });
};
const deleteClick = e => {
  ElMessageBox.confirm("确定删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteApi({
      e
    }).then(res => {
      ElMessage({
        type: "success",
        message: `${res.msg}`
      });
      getlist();
    });
  });
};
const seeClick = e => {
  seekdataApi({
    dictType: e
  }).then(res => {
    console.log(res);
    ruleFormtwo.value = res.data;
    dialogVisibletwo.value = true;

    // dialogVisible.value = true;
    // ruleForm.value = res.data;
    // xgstatus.value = false;
  });
};
const addClick = e => {
  dialogVisiblethree.value = true;
  ruleFormthree.value = {
    dictSort: "",
    dictLabel: "",
    dictValue: "",
    dictType: "",
    listClass: "default",
    status: "0"
  };
  ruleFormthree.value.dictType = e.dictType;
  ruleFormthree.value.status = "0";
};

const refresh = () => {
  refreshCache();
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .contentbox {
    width: 100%;
  }

  .szbox {
    justify-content: end;
    display: flex;
  }
}

.card {
  padding: 25px;
}

.hzbox {
  color: #409eff;
  cursor: pointer;
}

.savebox {
  display: flex;
  justify-content: center;
}
</style>
